<template>
  <div class="file-list">
    <a-menu :auto-open-selected="true" @menuItemClick="handleMenuSelect">
      <a-menu-item v-for="(item, index) in modelValue" :key="index+1">
        <div class="file-item">
          <img v-if="item.file_info.includes('.pdf')" src="@/assets/images/registerManage/pdf.png" class="pdf-icon" />
          <img v-else-if="item.file_info.includes('.xls')" src="@/assets/images/registerManage/excel.png" />
          <img v-else-if="item.file_info.includes('.docx')" src="@/assets/images/registerManage/word.png" />
          <img v-else src="" />
          <span class="title">{{ item.file_name }}</span>
          <a-space size="large">
            <a-dropdown-button>
              <template #content>
                <a-doption @click.stop="downLoadFile(item, index)">
                  <span>下载</span>
                  <!-- <a :href="getDownd(index)">下载</a> -->
                </a-doption>
                <a-doption @click.stop="removeFile(item, index)">
                  <span>删除</span>
                </a-doption>
              </template>
            </a-dropdown-button>
          </a-space>
        </div>
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { toRefs, } from 'vue';

const props = defineProps<{
  modelValue: any[];
}>();

const emits = defineEmits(['update:modelValue', 'viewFile']);

const { modelValue } = toRefs(props);

console.log(modelValue);
const handleMenuSelect = (e: any) => {
  emits('viewFile', e);
};

/* 下载文件 */
const downLoadFile = (item: any, index: number) => {
  console.log(item, index);
};
/* 删除文件 */
const removeFile = (item: any, index: number) => {
  console.log(item, index);
  /* 后续操作------删除文件操作 */
  /* 模拟删除 */
  const newFileList = modelValue.value.filter((_, i) => i !== index);
  emits('update:modelValue', newFileList);
};
</script>

<style lang="less" scope>
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;

  img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }

  .pdf-icon {
    width: 18px;
    height: 16px;
  }

  .title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icons {
    width: 15%;
  }
}
/* 修改arco默认样式 */
.file-list {
  .arco-menu-light .arco-menu-item.arco-menu-selected {
    background: #e5effe;
  }

  .arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix {
    left: 0;
  }

  .arco-menu-icon-suffix.is-open {
    transform: rotate(0);
  }

  .arco-menu-item {
    display: flex;
    padding: 0;
  }

  .arco-btn-size-medium.arco-btn-only-icon {
    padding-top: 15px;
  }

  .arco-btn-secondary[type='button'] {
    background: transparent;
    border-right: none;
  }

  .arco-btn-icon {
    transform: rotate(90deg);
  }

  .arco-menu-vertical .arco-menu-item:not(.arco-menu-has-icon) {
    &:hover {
      background: rgba(240, 244, 250, 1);
    }
  }

  .arco-menu-light .arco-menu-item.arco-menu-selected {
    background: #e5effe;
  }

  .arco-menu-vertical .arco-menu-inline-header.arco-menu-has-icon {
    &:hover {
      background: #f0f4fa;
    }
  }

}
</style>